export const optionChart1Config = (data?: any, total?: any) => {
	if (!data) {
		data = []
	}
	const optionRich = {
		name: {
			fontSize: 14,
			fontWeight: 700,
			color: '#1C1C28',
		},
	}

	const option = {
		color: ['#F89F33', '#FCF04C', '#33F8B5FF', '#33CFF8', '#339CF8'],
		legend: {
			icon: 'circle',
			right: 0,
			top: 'center',
			orient: 'vertical',
			formatter: (name) => {
				const v = data.find((item) => item.label == name) || {}
				let prce: any = 0
				if (+total > 0 && v.value) {
					prce = ((v.value / total) * 100).toFixed(2)
				}
				return `{name|${name} ${prce}%}`
			},
			textStyle: {
				rich: optionRich,
			},
		},
		dataset: {
			source: [
				['类别', '数量'],
				...data.map((item) => {
					return [item.label, item.value]
				}),
			],
		},
		series: [
			{
				type: 'pie',
				radius: [70, 100],
				center: ['50%', '50%'],
				label: {
					position: 'center',
					formatter: `{name|${total || 0}单}`,
					rich: {
						name: {
							fontFamily: 'Microsoft YaHei Bold',
							fontWeight: 700,
							fontSize: 24,
							padding: [10, 0, 0, 0],
						},
					},
				},
			},
		],
	}
	return option
}

export const optionChart2Config = (data?: any) => {
	if (!data) {
		data = []
	}
	const option = {
		color: ['#0052D9', '#FF5F46'],
		legend: {
			icon: 'roundRect',
			itemHeight: 2,
		},
		grid: {
			left: '8%',
		},
		dataset: {
			source: [
				['类别', '自动回访', '人工回访'],
				...data.map((item) => {
					return [item.label, item.value, item.value2]
				}),
			],
		},
		xAxis: {
			type: 'category',
			boundaryGap: true,
			splitLine: {
				show: false,
				interval: 'auto',
				lineStyle: {
					type: 'dashed',
					color: ['#cfcfcf'],
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: '#cfcfcf',
				},
			},
			axisLabel: {
				interval: 0,
				rotate: 15,
				textStyle: {
					fontSize: 12,
					color: '#9e9d9f',
					fontWeight: 600,
				},
			},
		},
		yAxis: [
			{
				type: 'value',
				splitLine: {
					show: true,
					lineStyle: {
						// type: 'dashed',
						color: ['#cfcfcf'],
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
					lineStyle: {
						fontSize: 12,
						color: '#cfcfcf',
					},
				},
				axisLabel: {
					textStyle: {
						fontSize: 12,
						color: '#9e9d9f',
						fontWeight: 600,
					},
				},
				max: 100,
			},
		],
		series: [
			{
				type: 'line',
				symbol: 'none',
				symbolSize: 6,
				smooth: false,
			},
			{
				type: 'line',
				symbol: 'none',
				symbolSize: 6,
				smooth: false,
			},
		],
	}
	return option
}

export const optionChart3Config = (data?: any) => {
	if (!data) {
		data = []
	}
	const option = {
		color: ['#0052D9', '#ED7B2F'],
		grid: {
			right: 0,
		},
		dataset: {
			source: [
				['地区', '回访满意', '回访不满意'],
				...data.map((item) => {
					return [item.label, item.value, item.value2]
				}),
			],
		},
		xAxis: {
			type: 'category',
			splitLine: {
				show: false,
				interval: 'auto',
				lineStyle: {
					type: 'dashed',
					color: ['#cfcfcf'],
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: '#cfcfcf',
				},
			},
			axisLabel: {
				interval: 0,
				rotate: 15,
				textStyle: {
					fontSize: 12,
					color: '#9e9d9f',
					fontWeight: 600,
				},
			},
		},
		series: [
			{
				type: 'bar',
				barWidth: 20,
				smooth: false,
			},
			{
				type: 'bar',
				barWidth: 20,
				smooth: false,
			},
		],
	}
	return option
}

export const tableAreaConfig = {
	stripe: true,
	border: true,
	showIndex: false,
	columns: [
		{ label: '区域', prop: 'area', width: 180 },
		{ label: '回访工单总数', prop: 'count' },
		{ label: '回访满意总数', prop: 'satisfactionCount' },
		{ label: '回访不满意总数', prop: 'dissatisfiedCount' },
		{ label: '回访满意度（%）', prop: 'pice' },
	],
}

export const tableOrgConfig = {
	stripe: true,
	border: true,
	showIndex: false,
	columns: [
		{ label: '区域', prop: 'area', width: 180 },
		{ label: '回访工单总数', prop: 'count' },
		{ label: '回访满意总数', prop: 'satisfactionCount' },
		{ label: '回访不满意总数', prop: 'dissatisfiedCount' },
		{ label: '回访满意度（%）', prop: 'pice' },
	],
}
